<template>
  <div >
    <el-card style="margin-top:1em">
      <div>
    <el-form label-width="80px"
    ref="myForm"
    :model="form">
      <el-form-item label="账号" prop="username">
        <el-input v-model="assets.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="assets.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Ysubmit1">添加为用户</el-button>
        <el-button type="primary" @click="Ysubmit2">添加为教师</el-button>
        <el-button type="primary" @click="Ysubmit3">添加为管理员</el-button>
      </el-form-item>
    </el-form>
</div>
<!-- 1 -->
      <el-table
        :data="articles"
        border
        style="width: 100%">
          <el-table-column
          prop="id"
          label="id"
          width="280">
        </el-table-column>
        <el-table-column
          prop="username"
          label="学生账号"
          width="280">
        </el-table-column>
        <el-table-column
          prop="password"
          label="学生密码"
          width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="Yedit(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 2 -->
      <el-table
        :data="articles2"
        border
        style="width: 100%">
          <el-table-column
          prop="id"
          label="id"
          width="280">
        </el-table-column>
        <el-table-column
          prop="username"
          label="教师账号"
          width="280">
        </el-table-column>
        <el-table-column
          prop="password"
          label="教师密码"
          width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete2(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 3 -->
      <el-table
        :data="articles3"
        border
        style="width: 100%">
          <el-table-column
          prop="id"
          label="id"
          width="280">
        </el-table-column>
        <el-table-column
          prop="username"
          label="管理账号"
          width="280">
        </el-table-column>
        <el-table-column
          prop="password"
          label="管理员密码"
          width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete3(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

  <div class="block">
  </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data () {
    return {
      form: {
        num: 1
      },
      assets: {
        username: '',
        password: ''
      },
      articles: [],
      articles2: [],
      articles3: []
    }
  },
  created () {
    this.loadArticles()
  },
  methods: {
    loadArticles () {
      this.$http.get('http://localhost:3000/assets').then((response) => {
        this.articles = response.data
        console.log(response.data)
      })
      this.$http.get('http://localhost:3000/teacher').then((response) => {
        this.articles2 = response.data
        console.log(response.data)
      })
      this.$http.get('http://localhost:3000/admin').then((response) => {
        this.articles3 = response.data
        console.log(response.data)
      })
    },
    Yedit (index, row) {
      console.log(row.id)
      const Info = row
      localStorage.setItem('Info', JSON.stringify(Info))
      this.$router.push({
        path: '/usergai',
        query: { Info: Info }
      })
    },
    doDelete (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      const id = idObj.toString()
      this.$http.delete(`http://localhost:3000/assets/${id}`).then((response) => {
        console.log(response.data.wen)
        this.loadArticles()
      }).error((err) => {
        console.log(err)
      }
      )
    },
    doDelete2 (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      const id = idObj.toString()
      this.$http.delete(`http://localhost:3000/teacher/${id}`).then((response) => {
        console.log(response.data.wen)
        this.loadArticles()
      }).error((err) => {
        console.log(err)
      }
      )
    },
    doDelete3 (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      const id = idObj.toString()
      this.$http.delete(`http://localhost:3000/admin/${id}`).then((response) => {
        console.log(response.data.wen)
        this.loadArticles()
      }).error((err) => {
        console.log(err)
      }
      )
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('你确定要删除此用户吗?').then(() => {
        this.doDelete(row.id)
      }).catch(() => {
      })
    },
    handleDelete2 (index, row) {
      console.log(index, row)
      this.$confirm('你确定要删除此用户吗?').then(() => {
        this.doDelete2(row.id)
      }).catch(() => {
      })
    },
    handleDelete3 (index, row) {
      console.log(index, row)
      this.$confirm('你确定要删除此用户吗?').then(() => {
        this.doDelete3(row.id)
      }).catch(() => {
      })
    },
    Ysubmit1 () {
      const data = this.assets
      const assets = JSON.stringify(data)
      this.$http.post('http://localhost:3000/assets', assets).then(res => {
        console.log('ok', res)
      }).catch(err => {
        console.log(err)
      })
    },
    Ysubmit2 () {
      const data = this.assets
      const assets = JSON.stringify(data)
      this.$http.post('http://localhost:3000/teacher', assets).then(res => {
        console.log('ok', res)
      }).catch(err => {
        console.log(err)
      })
    },
    Ysubmit3 () {
      const data = this.assets
      const assets = JSON.stringify(data)
      this.$http.post('http://localhost:3000/admin', assets).then(res => {
        console.log('ok', res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang='less'>
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
.p img {
  width: 100%;
  height: 100%;
}
</style>
